<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css显示模式</title>
    <style>
        /* 什么是显示模式
                元素以什么方式显示在网页上
                HTML元素一般分为 块元素 行内元素 两种类型
        */
        /* 
           块元素    h1--h6 div p ul ol li 其中div是最典型的块元素
                    独占一行 (不用也不给别人用)
                    高度 宽度 内外边距都可以控制
                    宽度默认为容器的100%
                    是一个容器及盒子 里面可以放行内或块元素
                注意
                    文字类的元素内部不能嵌套块元素 p h1--h6
                  

        */
        h1 {
            background-color: green;
            height: 200px;
            width: 200px;
        }
        .father {
            background-color: palevioletred;
            width: 200px;
            height: 200px;
        }
        .son {
            background-color: green;
        }
        /* 
            行内元素  span a ... span是最典型的行内元素
                相邻行内元素在一行上 一行可以显示多个
                高度宽度直接设置是无效的  默认宽度是内容宽度
                行内元素只能容纳文本或其他行内元素

                特殊情况<a>可以放块级元素 给<a>转换成块级模式更安全
        */

        /*
                行内块元素 同时具有块元素和行内元素的特点
                    <img> > <input> <td>
                    一行可以有多个行内块元素 相邻元素之间有空白缝隙(行内)
                    默认宽度就是它本身内容的宽度(行内)
                    高度 行高 外边距及内边距都可以控制(块级)
        */
        input.aa {
            background-color: gold;
            width: 300px;
            
            line-height: 20px;
        }
  </style>
</head>

<body>
    <div id="root">
        <h1>css显示模式</h1>烦烦烦<br>
        <span>你好1</span>二通过
        <div class="father">你好世界
            <div class="son">你发</div>
        </div>
        <p>
            <div style="background-color: green;">你好div</div>
        </p>
        <h3>行内块元素</h3>
        <input class="aa" type="text">
        <input class="aa" type="text"><br>
        
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>